<template>
  <div>
    <f-table ref="table" size="default" rowKey="identityId" :columns="columns" :operator="operator" :params="queryParam" :api="api.processInstance.taskList" :autoLoad="false" :showPagination="false" :multiple="false">
        <span slot="action" slot-scope="text, record">
          <template>
             <a href="javascript:;" @click="removeAuth(record)">详情</a>
             <a-divider type="vertical"/>
          </template>
           <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item v-if="record.endTime==''&&(record.assignee==null||record.assignee=='')" @click="btnClaim(record)">
                认领
              </a-menu-item>
               <a-menu-item v-if="record.endTime==''&&record.assignee===$store.getters.userInfo.username" @click="btnUnclaim(record)">
                取消认领
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
    </f-table>
  </div>
</template>

<script>
  import api from './js/api'

  export default {
    name: 'ProcessInstanceTask',
    components: {},
    data() {
      return {
        api: Object.assign(api, this.api),
        authModal: false,
        //列表初始化查询参数
        queryParam: {
          processInstanceId: ''
        },
        // 表头
        columns: [
          {
            title: '流程实例',
            align: 'center',
            dataIndex: 'processInstanceName'
          },
          {
            title: '任务名称',
            dataIndex: 'name'
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'createTime'
          }, {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime'
          }, {
            title: '所有人',
            align: 'center',
            dataIndex: 'owner'
          }, {
            title: '执行人',
            align: 'center',
            dataIndex: 'assignee'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    computed: {},
    methods: {
      setData(data) {
        if (data && data.id) {
          this.queryParam.processInstanceId = data.id
          this.$refs['table'].refresh(false)
        }
      },
      removeAuth(record) {
        this.http.del(this, {
          url: this.api.process.authDel,
          data: {
            processInstanceId: this.queryParam.processDefinitionId,
            identityType: record.identityType,
            identityId: record.identityId
          },
          success: (me) => {
            this.$refs['table'].refresh(false)
          }
        })
      },
      handleSubmit() {
        this.$refs.form.submit({ processDefinitionId: this.queryParam.processDefinitionId }, this.handleCancel)
      },
      handleCancel() {
        this.authModal = false
      },
      btnClaim(row) {
        this.http.put(this, {
          url: this.api.task.claim,
          data: {
            taskId: row.id
          },
          success(me, data) {
            me.$refs['table'].refresh(false)
          }
        })
      },
      btnUnclaim(row) {
        this.http.put(this, {
          url: this.api.task.unclaim,
          data: {
            taskId: row.id
          },
          success(me, data) {
            me.$refs['table'].refresh(false)
          }
        })
      }
    },
    created() {

    }
  }
</script>
